<template>
	<view class="salary-page">
		<NavBar title="设置薪资"/>
		<view class="salary">
			<wd-form ref="formRef" :model="formData">
				<wd-calendar
					label="日期"
					label-width="100px"
					placeholder="请选择日期"
					prop="today"
					v-model="formData.today"
					:rules="[{ required: true, message: '请选择物流日期' }]"
				/>
				<wd-input
				  label="金额"
				  label-width="100px"
				  prop="money"
					type="number"
				  v-model="formData.money"
				  placeholder="请输入金额"
				  :rules="[{ required: true, message: '请填写金额' }]"
				/>
				<wd-cell title="备注" title-width="100px" prop="remark">
					<wd-textarea v-model="formData.remark" placeholder="请填写备注" />
				</wd-cell>
			</wd-form>
		</view>
		<view class="btn-box justify-center">
			<wd-button class="btn" type="info" @tap="cancel"> 取 消 </wd-button>
			<wd-button class="btn" @tap="submit"> 确 认 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { setSalaryApi } from '@/api'
	import { useUserStore } from '@/store'
	const formRef = ref()
	const formData = ref({
		today: null,
		remark: '',
		money: '',
		user_id: '',
		nickname: '',
	})
	const cancel = () => {
		uni.navigateBack()
	}
	const submit = () =>{
		formRef.value.validate().then(({ valid }) => {
			if(valid) {
				const { userInfo } = useUserStore()
				const { today, remark, money, user_id, nickname } = formData.value
				const params = {
					today, remark,
					data: [
						{
							money,
							user_id,
							nickname
						}
					],
					uid: userInfo.uid
				}
				setSalaryApi(params).then(res => {
					uni.showToast({
						icon: 'none',
						title: '设置成功'
					})
					uni.navigateBack()
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})
			}
		})
	}
	onLoad((e) => {
		const { user_id, name } = e
		formData.value.user_id = user_id
		formData.value.nickname = name
	})
</script>

<style lang="scss" scoped>
	.salary-page {
		padding: 20rpx 24rpx;
		.salary {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.wd-textarea {
				padding: 10rpx;
				border-radius: 20rpx;
				border: 1px solid #eee;
			}
		}
		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			gap: 40rpx;
			padding: 20rpx 24rpx;
			background-color: #fff;
			.btn {
				flex: 1;
			}
		}
	}
</style>
